<div [ngStyle]="style" [class]="styleClass" [ngClass]="{'c-colorpicker':true,'c-colorpicker-overlay':!inline,'c-colorpicker-dragging':colorDragging||hueDragging}">
  <input #input type="text" *ngIf="!inline" class="c-colorpicker-preview c-inputtext c-state-default c-corner-all" readonly="readonly"
    [ngClass]="{'c-state-disabled': disabled}" (focus)="onInputFocus()" (click)="onInputClick()" (keydown)="onInputKeydown($event)"
    [attr.id]="inputId" [attr.tabindex]="tabindex" [disabled]="disabled" [style.backgroundColor]="inputBgColor">
  <div #panel [ngClass]="{'c-colorpicker-panel c-corner-all': true, 'c-colorpicker-overlay-panel c-shadow':!inline, 'c-state-disabled': disabled}"
    (click)="onPanelClick()" [@panelState]="inline ? 'visible' : (panelVisible ? 'visible' : 'hidden')" [style.display]="inline ? 'block' : (panelVisible ? 'block' : 'none')">
    <div class="c-colorpicker-content">
      <div #colorSelector class="c-colorpicker-color-selector" (mousedown)="onColorMousedown($event)">
        <div class="c-colorpicker-color">
          <div #colorHandle class="c-colorpicker-color-handle"></div>
        </div>
      </div>
      <div #hue class="c-colorpicker-hue" (mousedown)="onHueMousedown($event)">
        <div #hueHandle class="c-colorpicker-hue-handle"></div>
      </div>
    </div>
  </div>
</div>